<template>
	<div>
		<h1>
			<div>
				<a-select default-value="请选择需要播放的视频" @change="bofangClick" class='bf-select'>
				<a-select-option v-for="(item,index) in videoList" :key="index" :value="item.videoUrl">
						{{item.videoName}}
					</a-select-option>
				</a-select></div>
			<div><input type="file" id='btnFile'></div>
			<div><input type="button" value="开始上传" @click="uploadBtn"></div>

		</h1><br />
		<video id="example-video" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}' />
	</div>
</template>

<script>
	import axios from "axios"
	import 'ant-design-vue/lib/select/style/index.css';
	import {Select} from 'ant-design-vue'
	export default {
		data() {
			return {
				videoList:[],
				setting: {
					playbackRates: [0.5, 1.0, 1.5, 2.0,3,5,10], // 播放速度
					autoplay: true, //如果true,则自动播放
					controls : true, //是否拥有控制条
					loop : true, //视频播放结束后，是否循环播放
					// muted : true, // 是否静音
					"metadata":true, //元数据信息 ，比如视频长度，尺寸等
					// ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
					// children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序哦。
					muted: false, // 默认情况下将会消除任何音频。
					loop: true, // 循环播放
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{ // 播放资源和资源格式
						type: "application/x-mpegURL",
						src: 'http://39.103.131.74:2000/bigFile/xushan/index.m3u8' //你的视频地址（先为空，之后动态赋值）
					}],
					hls: {
						withCredentials: true
					},
					poster: require("../../assets/img/logo_1.png"), //视频封面图
					width: document.documentElement.clientWidth / 2, // 默认视频全屏时的最大宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
				}
			}
		},
		components: {
					  aSelect:Select,
					  aSelectOption:Select.Option,
				},
		mounted() {
			
			this.$nextTick(() => {
				this.player = videojs(document.getElementById('example-video'), this.setting)
			})
		},
		destroyed(){
			this.player.dispose();
		},
		created() {
			this.getVideodData()
		},
		methods: {
			getVideodData(){
				axios.get('http://39.103.131.74:2000/api/bigFile').then(res => {
					this.videoList = res.data
				})
			},
			bofangClick(url){
				this.player.src({
						src:encodeURI(url),
						type: "application/x-mpegURL",
					})
			},
			uploadBtn() {
				var btnFile = document.querySelector('#btnFile');
				let formData = new FormData();
				formData.append('file', btnFile.files[0]);
				axios.post('http://39.103.131.74:2000/api/uploadVideo', formData).then(res => {
					this.getVideodData()
					setTimeout(() => {
						this.player.src({
							src:res.data.data.path,
							type: "application/x-mpegURL",
						})
					}, 300)
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	h1{
		display: flex;
		flex-direction: row;
		margin-bottom: 10px;
		text-align: center;
		div{
			margin:0 20px;
			.bf-select{
				width: 300px;
			}
		}
	}
</style>
